<template>
  <nut-wrapper>
    <view class="setting-page tab-bar-page">
      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="user-info">
          <nut-avatar size="large"> <img :src="userInfo.avatar" /></nut-avatar>
          <div class="user-detail">
            <div class="nickname">用户名</div>
            <div class="user-id">ID: {{ userInfo.nickname }}</div>
          </div>
        </div>
      </div>

      <!-- 功能列表 -->
      <nut-cell-group title="账号管理">
        <nut-cell title="个人资料" is-link @click="handleProfile"></nut-cell>
        <nut-cell title="账号安全" is-link @click="handleSecurity"></nut-cell>
        <nut-cell
          title="切换账号"
          is-link
          @click="handleSwitchAccount"
        ></nut-cell>
      </nut-cell-group>

      <nut-cell-group title="通用设置">
        <nut-cell title="消息通知" is-link></nut-cell>
        <nut-cell title="隐私设置" is-link></nut-cell>
        <nut-cell title="清除缓存" is-link @click="handleClearCache"></nut-cell>
        <nut-cell title="版本" :desc="version"></nut-cell>
        <nut-cell title="切换主题" is-link @click="handleSwitchTheme">
        </nut-cell>
      </nut-cell-group>

      <nut-cell-group title="其他">
        <nut-cell title="关于我们" is-link @click="handleAbout"></nut-cell>
        <nut-cell title="帮助与反馈" is-link @click="handleFeedback"></nut-cell>
      </nut-cell-group>

      <div class="logout-btn">
        <nut-button block type="danger">退出登录</nut-button>
      </div>
    </view>
  </nut-wrapper>
</template>

<script>
import { useThemeStore } from "@/stores/themeStore.js";
import Taro from "@tarojs/taro";
import { useUserStore } from "@/stores/userStore.js";
import http from "@/assets/utils/http.js";
import { useVersionStore } from "@/stores/version.js";
export default {
  data() {
    return {
      themeVars: {
        //...themeVars,
      },
      openFlag: true,
      color: "",
      version: "",
    };
  },
  computed: {
    userInfo() {
      return this.userStore.getUserInfo;
    },
  },
  setup() {
    const userStore = useUserStore();
    return { userStore };
  },
  mounted() {
    // 从本地存储加载用户信息
    this.userStore.loadFromStorage();
    this.themeStore = useThemeStore();
    this.themeVars = this.themeStore.currentTheme;
    this.versionStore = useVersionStore();
    this.version = this.versionStore.version;
  },
  onLoad() {
    console.log(process.env.TARO_APP_API);
  },
  methods: {
    handleChangeRadio(value) {
      console.log(value);
      if (value) {
        this.themeStore.setThemeByUser("userA");
      } else {
        this.themeStore.setThemeByUser("userB");
      }
      this.themeVars = this.themeStore.currentTheme;
    },
    handleProfile() {
      Taro.navigateTo({
        url: "/packageA/pages/profile/index",
      });
    },
    handleSecurity() {
      Taro.navigateTo({
        url: "/packageA/pages/security/index",
      });
    },
    handleChangeColor(color) {
      const text = /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/;
      this.themeStore.setTheme(color);
    },

    handleSwitchAccount() {
      Taro.navigateTo({
        url: "/pages/login/login",
      });
    },
    handleAbout() {
      Taro.navigateTo({
        url: "/packageA/pages/about/index",
      });
    },
    handleClearCache() {
      Taro.clearStorageSync();
      Taro.showToast({
        title: "清除缓存成功",
        icon: "success",
      });
    },
    handleFeedback() {
      Taro.navigateTo({
        url: "/packageA/pages/feedback/index",
      });
    },
    handleSwitchTheme() {
      Taro.navigateTo({
        url: "/packageA/pages/theme/index",
      });
    },
  },
};
</script>

<style lang="scss">
.setting-page {
  min-height: 100vh;
  background-color: var(--background-color);

  :deep(.nut-cell-group__title) {
    color: var(--text-color-secondary);
    background-color: var(--background-color);
  }

  :deep(.nut-cell) {
    background-color: var(--card-background);
    color: var(--text-color);

    &::after {
      border-bottom: 1px solid var(--border-color);
    }

    .nut-cell__title {
      color: var(--text-color);
    }

    .nut-cell__desc {
      color: var(--text-color-secondary);
    }
  }

  .user-card {
    padding: 30rpx;
    background-color: var(--card-background);
    margin-bottom: 20rpx;

    .user-info {
      display: flex;
      align-items: center;
      gap: 20rpx;

      .user-detail {
        .nickname {
          font-size: 32rpx;
          font-weight: bold;
          color: var(--text-color);
          margin-bottom: 8rpx;
        }

        .user-id {
          font-size: 24rpx;
          color: var(--text-color-secondary);
        }
      }
    }
  }

  .logout-btn {
    margin: 40rpx 30rpx;
  }
}

.switch_box {
  display: flex;
  align-items: center;
  gap: 10rpx;
  .color_box {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
  }
}
</style>
